<!DOCTYPE html>
<html lang="en">
    <% let {list:data,grade} = require(`../data.json`)%>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="//www.ieduchina.com/statics/pcc/img/favicon.ico">
    <title>CAT4 TEST PRACTICE GRADE <%=grade%></title>
</head>
<body>
    <%=require(`@cs/pdf_en_header/index.ejs`)({name:`CAT4 TEST PRACTICE GRADE ${grade}`})%>
    <section>
        <ul>
            <%data.forEach((item,index)=>{%>
                <li>
                  <p class="num"><%=index+1%>、
                    <%item.timu.forEach((its)=>{%>
                        <%if(its.type=="text"){%>
                            <%=its.value%>
                        <%}%>
                        <% if(its.type=="image"){%>
                        <br><img lazy preview src="<%=require(`../images/${its.value}.png`)%>" alt="">
                        <%}%>
                    <%})%>
                    <%item.option.forEach((its,index)=>{%>
                        <%if(its.type=="text"){%>
                            <p><%=`${['A','B','C','D','E','F'][index]}. ${its.value}`%></p>
                        <%}else if(its.type=="image"){%>
                            <p><%=`${['A','B','C','D','E','F'][index]}. `%><img lazy preview src="<%=require(`../images/${its.value}.png`)%>" alt=""></p>
                        <%}%>
                    <%})%>
                </p>
                    <div class="bg">
                        <p><span>Student answers：</span><span>评分：25</span></p>
                        <p>
                            <%if(index){%>
                                <span><%=item.value%></span>
                            <%}else{%>
                                <span class="error">A</span>    
                            <%}%>
                        </p>
                    </div>
                    <div class="bg">
                        <p><span>Standard answer：</span></p>
                        <p><span><%=item.value%></span></p>
                        <%if(item.explanation && item.explanation.length){%>
                            <p>
                                <span><%item.explanation.forEach((el,i)=>{%>
                                <%if(el.type=="text"){%>
                                  <%=el.value%>
                                <%}else{%>
                                  <img lazy preview src="<%=require(`../images/${el.value}.png`)%>" alt="">
                                <%}%>
                                <%})%></span>
                            </p>    
                        <%}%>
                    </div>
                </li>
            <%})%>
        </ul>
    </section>
</body>

</html>